<%include file="header.html"%> <%include file="top.html"%> <%include
file="left.html"%>
<div class="main-content">
	<div class="breadcrumbs" id="breadcrumbs"><script
			type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
	</script>

		<ul class="breadcrumb">
			<li><i class="icon-home home-icon"></i> <a
					href="index.php">首页</a></li>
		</ul>
		<!-- .breadcrumb --></div>

	<div class="page-content">


		<div id="moveDevice" style="display:none" class="col-xs-12">
			<div class="alert alert-info">
				<form class="form-horizontal" role="form">
					<div class="row">

						<div class="col-sm-12">
							<div class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5">游戏</label>
								<div class="col-sm-3"><select id="selectGame2">
									<%if $selectGames%> <%foreach from = $selectGames key = key item = value%>
									<%if $nowGame == $value %>
									<option value="<%$value%>" selected><%$value%></option>
									<%else%>
									<option value="<%$value%>"><%$value%></option>
									<%/if%> <%/foreach%> <%/if%>
								</select>
								</div>
							</div>
						</div>

						<div class="col-sm-12">
							<div  class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
							</div>
						</div>

						<div class="col-sm-12">
							<div class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5">平台</label>
								<div class="col-sm-3">
									<select id="platform2">
										<option value="" id="selectPlatform">平台</option>
										<%if $platforms%> <%foreach from = $platforms key = key item = value%>
										<%if $platform == $value %>
										<option value="<%$value%>" selected><%$value%></option>
										<%else%>
										<option value="<%$value%>"><%$value%></option>
										<%/if%> <%/foreach%> <%/if%>

									</select>
								</div>
							</div>
						</div>


						<div class="col-sm-12">
							<div  class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
							</div>
						</div>

						<div class="col-sm-12">
							<div class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5">渠道</label>
								<div class="col-sm-3">
									<select id="channel2">
										<option value="" id="selectChannel2">渠道</option>
										<%if $channels%> <%foreach from = $channels key = key item = value%>
										<%if $channel == $value %>
										<option value="<%$value%>" selected><%$value%></option>
										<%else%>
										<option value="<%$value%>"><%$value%></option>
										<%/if%> <%/foreach%> <%/if%>
									</select>
								</div>

							</div>
						</div>

						<div class="col-sm-12">
							<div  class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
							</div>
						</div>

						<div class="col-sm-12">
							<div class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5">日期</label>
								<div class="col-sm-3">
									<div class="input-group"><span class="input-group-addon"> <i
											class="icon-calendar bigger-110"></i> </span> <input
											class="date-picker col-xs-12 col-sm-12" id="date2"
											value="<%$date%>" type="text" data-date-format="yyyy-mm-dd" /></div>
								</div>
							</div>
						</div>


						<div class="col-sm-12">
							<div  class="row">
								<label class="col-sm-5 control-label no-padding-right" for="form-field-5"></label>
							</div>
						</div>

						<div class="col-sm-12">
							<div class="row"><label
									class="col-sm-5 control-label no-padding-right" for="form-field-5">&nbsp;&nbsp;&nbsp;&nbsp;</label>
								<div class="col-sm-2">
									<center>
										<button type="button" onClick="formSubmit('select', 'move');"
												class="width-50 btn btn-sm btn-primary">查询</button>
									</center>
								</div>
							</div>
						</div>




					</div>
				</form>
			</div>
		</div>

		<div id="pcDevice" style="display:block" class="col-xs-12">
			<div class="alert alert-info">
				<form class="form-horizontal" role="form">
					<div class="row">

						<div class="col-sm-2">
							<div class="row">
								<label class="col-sm-2 control-label no-padding-right" for="form-field-5">游戏</label>
								<div class="col-sm-3"><select id="selectGame">
									<option value="" >游戏</option>
									<%if $selectGames%> <%foreach from = $selectGames key = key item = value%>
									<%if $nowGame == $value %>
									<option value="<%$value%>" selected><%$value%></option>
									<%else%>
									<option value="<%$value%>"><%$value%></option>
									<%/if%> <%/foreach%> <%/if%>
								</select>
								</div>
							</div>
						</div>


						<div class="col-sm-2">
							<div class="row">
								<label class="col-sm-2 control-label no-padding-right" for="form-field-5">平台</label>
								<div class="col-sm-3">
									<select id="platform">
										<option value="" id="selectPlatform">平台</option>

										<%if $platforms%> <%foreach from = $platforms key = key item = value%>
										<%if $platform == $value %>
										<option value="<%$value%>" selected><%$value%></option>
										<%else%>
										<option value="<%$value%>"><%$value%></option>
										<%/if%> <%/foreach%> <%/if%>

									</select>
								</div>

							</div>
						</div>


						<div class="col-sm-2">
							<div class="row">
								<label class="col-sm-2 control-label no-padding-right" for="form-field-5">渠道</label>
								<div class="col-sm-3">
									<select id="channel">
										<option value="" id="selectChannel">渠道</option>
										<%if $channels%> <%foreach from = $channels key = key item = value%>
										<%if $channel == $value %>
										<option value="<%$value%>" selected><%$value%></option>
										<%else%>
										<option value="<%$value%>"><%$value%></option>
										<%/if%> <%/foreach%> <%/if%>
									</select>
								</div>

							</div>
						</div>


						<div class="col-sm-2">
							<div class="row">
								<label class="col-sm-2 control-label no-padding-right" for="form-field-5">日期</label>
								<div class="col-sm-9">
									<div class="input-group"><span class="input-group-addon"> <i
											class="icon-calendar bigger-110"></i> </span> <input
											class="date-picker col-xs-12 col-sm-12" id="date"
											value="<%$date%>" type="text" data-date-format="yyyy-mm-dd" /></div>
								</div>
							</div>
						</div>


						<div class="col-sm-2">
							<div class="row"><label
									class="col-sm-2 control-label no-padding-right" for="form-field-5">&nbsp;&nbsp;&nbsp;&nbsp;</label>
								<div class="col-sm-9">
									<center>
										<button type="button" onClick="formSubmit('select', 'pc');"
												class="width-50 btn btn-sm btn-primary">查询
										</button>
									</center>
								</div>
							</div>
						</div>


					</div>
				</form>
			</div>
		</div>



		<div class="col-xs-12">
			<div class="table-header">

				<button type="button"
						class="width-10 btn btn-sm btn-primary">实时充值趋势图
				</button>

				<!--
                <button type="button"  onClick="formSubmit('redo', 'pc');"
                    class="width-10 btn btn-sm btn-primary">导出结果
                </button>
                -->

			</div>



			<div id="view"  class="table-responsive">
				<div id="container" ></div>
			</div>


			<!-- /.table-responsive --></div>
	</div>
	<!-- /.page-content --></div>
<!-- /.main-content -->
<script src="<%$staticUrl%>js/chart/echarts.min.js"></script>

<script type="text/javascript">

    $(function () {





    });


    jQuery(function($) {
        $('#container').css({'width':'100%' , 'height':'600px'});


        $('.date-picker').datepicker({
            autoclose : true
        }).next().on(ace.click_event, function() {
            $(this).prev().focus();
        });


		/*
		 $('[data-rel="tooltip"]').tooltip({
		 placement : tooltip_placement
		 });
		 function tooltip_placement(context, source) {
		 var $source = $(source);
		 var $parent = $source.closest('table')
		 var off1 = $parent.offset();
		 var w1 = $parent.width();

		 var off2 = $source.offset();
		 var w2 = $source.width();

		 if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2))
		 return 'right';
		 return 'left';
		 }
		 */
    });

    formSubmit('select', 'move');
    function formSubmit(type, device) {
        if(device == "pc") {
            var game = $('#selectGame').val();
            var platform = $('#platform').val();
            var channel = $('#channel').val();
            var date = $('#date').val();
        } else if(device == "move") {
            var game = $('#selectGame2').val();
            var platform = $('#platform2').val();
            var channel = $('#channel2').val();
            var date = $('#date2').val();
        }

        if (!game) {
            alert('请将信息填写完整！');
        } else {
            url = "index.php?mod=Data&do=showChart&action=1&game="
                + game
                + "&platform="
                + platform
                + "&channel="
                + channel
                + "&date="
                + date
                + "&type="
                + type;
            get_chart(url);
        }
    }
    function get_chart(url) {
        $.ajax({
            url: url,
            type: "get",
            data: {},
            dataType: "json",
            success: function (data) {
                chart(data.title,data.legend,data.time,data.content);


            }
        });

    }
    function chart(title,legend,time,data) {
        option = {
            title: {
                text: title,
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:legend
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: time
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} '
                }
            },
            series: data
        };
        var myChart = echarts.init(document.getElementById('container'));
        myChart.setOption(option);

    }


    window.onload = function(){

        var width = document.documentElement.clientWidth;
        if(width < 1700) {
            $('#pcDevice').css("display", "none");
            $('#moveDevice').css("display", "block");
        } else if(width > 1700) {
            $('#pcDevice').css("display", "block");
            $('#moveDevice').css("display", "none");
        }

        // pc设备
        var select = document.getElementById('selectGame');
        select.onchange = function(){

            // 更改值后执行的代码
            var gameName = jQuery("#selectGame  option:selected").text();
            var _tagNum = 1;
            $.ajax({
                type: "POST",
                url: "index.php?mod=Game&do=getPlatformByGame&game=" + gameName,
                data: "",
                dataType: 'html',
                success: function(data) {
                    var dataObj = eval("(" + data + ")");//转换为json对象

                    if(dataObj == null) {
                        $("#platform").empty();
                        $("#platform").append('<option value="" id="selectPlatform">平台</option>');
                        $("#channel").empty();
                        $("#channel").append('<option value="" id="selectChannel">渠道</option>');
                    }

                    var platform = dataObj.platform;
                    $("#platform").empty();
                    $("#platform").append('<option value="" id="selectPlatform">平台</option>');
                    for(var i=0;i<platform.length;i++){
                        $("#platform").append("<option value='"+platform[i]+"' >"+platform[i]+"</option>"+"<br/>");
                    }

                    var channel = dataObj.channel;
                    $("#channel").empty();
                    $("#channel").append('<option value="" id="selectChannel">渠道</option>');
                    for(var i=0;i<channel.length;i++){
                        $("#channel").append("<option value='"+channel[i]+"' >"+channel[i]+"</option>"+"<br/>");
                    }
                }
            });
        }


        // 移动设备
        var select2 = document.getElementById('selectGame2');
        select2.onchange = function(){
            // 更改值后执行的代码
            var gameName = jQuery("#selectGame2  option:selected").text();
            $.ajax({
                type: "POST",
                url: "index.php?mod=Game&do=getPlatformByGame&game=" + gameName,
                data: "",
                dataType: 'html',
                success: function(data) {
                    var dataObj = eval("(" + data + ")");//转换为json对象
                    if(dataObj == null) {
                        $("#platform2").empty();
                        $("#platform2").append('<option value="" id="selectPlatform2">平台</option>');
                        $("#channel2").empty();
                        $("#channel2").append('<option value="" id="selectChannel2">渠道</option>');
                    }

                    var platform = dataObj.platform;
                    $("#platform2").empty();
                    $("#platform2").append('<option value="" id="selectPlatform2">平台</option>');
                    for(var i=0;i<platform.length;i++){
                        $("#platform2").append("<option value='"+platform[i]+"' >"+platform[i]+"</option>"+"<br/>");
                    }

                    var channel = dataObj.channel;
                    $("#channel2").empty();
                    $("#channel2").append('<option value="" id="selectChannel2">渠道</option>');
                    for(var i=0;i<channel.length;i++){
                        $("#channel2").append("<option value='"+channel[i]+"' >"+channel[i]+"</option>"+"<br/>");
                    }
                }
            });
        }
    }

</script>
<script language="JavaScript">
    function myrefresh(){
        window.location.reload();
    }

    <%if $autoflush && $autoflush == 1%>
    setTimeout('myrefresh()',5 * 60 * 1000); //指定5分钟刷新一次
    <%/if%>

</script>


<%include file="footer.html"%>

